<!--用户登录  -->
<template>
<div class="index">
    <div class="login">
        <div class="bg">
            <img src="../../assets/img/bg4.png" alt="">
            <div>
                <router-link to="/register">还没有账号，去注册</router-link>
            </div>
        </div>
        <div class="userlogin">
            <div class="logintitle">用户登录</div>  
            <div class="Admin"><router-link to="/AdminLogin">管理员登录</router-link></div>
            <div>
                <input type="text" placeholder="User" id="user">
                <input type="text" placeholder="Password" id="pwd">
            </div>
            <button @click="UserLogin">登录</button>
        </div>
    </div>
</div>
</template>

<script>
import { RouterLink } from 'vue-router';

export default {
    data() {
        return {
            islogin:true,
        };
    },
    methods:{
        UserLogin(){
            // alert("这里是登录")
            // if(this.islogin){
                let user=document.querySelector("#user").value
                let pwd=document.querySelector("#pwd").value
                // console.log('用户名',user)
                // console.log('密码',pwd)
                var url=`http://localhost:3000/login?uname=${user}&upwd=${pwd}`
                this.axios.post(url).then(res=>{
                    // console.log('返回',res)
                    if(res.data.code==201){
                        alert("登录失败，请检查用户名或者密码")
                    }else{
                        alert("登录成功")
                        let userInfo={
                            isLogin: true,
                            uname:user,
                            upwd:pwd,
                        }
                        // 将登录状态存储到state中
                        this.$store.state.userInfo=userInfo
                        // 将登录状态存储到localStorage中
                        localStorage.setItem("userInfo",JSON.stringify(userInfo));
                        this.$router.push({
                          path:'/index/BookQuery'
                         })
                    }
                })
            // }
        }
    },
    //生命周期 - 创建完成（访问当前this实例）
    created() {
    },
    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {
    },
    components: { RouterLink }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.index{
    width: 100%;
  height: 100vh;
  background: url("../../assets/img/bg4.png") center center no-repeat;
  background-size: 100% 100%;
  position: fixed;
}
.login{
    /* 注册登录框 */
    text-align: center;
    /* background-color: rgb(218, 198, 198); */
    width: 600px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    flex-direction: row;
}
.bg{
    /* 登录框背景 */
    width: 300px;
    height: 300px;
    background-color: rgb(77, 170, 67);
    
}
.bg img{
    /* 登录框背景图片 */
    width: 100%;
    height: 300px;
}
.bg div{
    /* 跳转注册页面框 */
background-color: rgb(10, 105, 194);
border-radius: 15px;
width: 200px;
padding: 5px;
position: absolute;
top: 135px;
left: 50px;
}
.bg div a{
    /* 跳转注册页面按钮 */
    text-decoration: none;
    color: white;
    text-align: center;
    font-size: 10px;
}
.userlogin{
    /* 用户登录框 */
    width: 300px;
    height: 300px;
    background-color: rgb(248, 240, 240);
}
.userlogin .logintitle{
    /* 用户登录框标题 */
    font-size: 22px;
    color: rgb(3, 3, 3);
    height: 30px;
    margin: 10px 0;
    margin-top: 20px;
}

.userlogin .Admin{
    /* 管理员登录跳转框 */
    background-color: rgb(196, 244, 247);
    width: 80px;
    height: 25px;
    margin: auto;
    margin-bottom: 20px;
}
.userlogin .Admin a{
    /* 管理员跳转按钮 */
    text-decoration: none;
    font-size: 10px;
    padding: 5px;
}
.userlogin div input{
    /* 验证输入框 */
    width: 260px;
    height: 40px;
    border-radius: 5px;
    margin: 10px 5px;
}
.userlogin button{
    /* 登录按钮 */
    width: 160px;
    height: 40px;
    border-radius: 25px;
}
</style>